<div (mouseenter)="!readOnly&&showEditIcon()" (mouseleave)="!readOnly&&hideEditIcon()"
    style="display: flex;flex-wrap: nowrap;align-items: center;">
    <ng-container *ngIf="!editView">
        <mat-chip-list #chipList aria-label="chip list selection">
            <mat-chip *ngFor="let e of getLabel(inputOptions)">
                {{e|translate}}
            </mat-chip>
        </mat-chip-list>
    </ng-container>
    <div *ngIf="editView">
        <mat-chip-list #chipList aria-label="chip list selection">
            <mat-chip *ngFor="let e of getLabel(inputOptionsNext)" [selectable]="true" [removable]="true">
                {{e|translate}}
                <mat-icon matChipRemove (click)="remove(e)">cancel</mat-icon>
            </mat-chip>
        </mat-chip-list>
    </div>
    <ng-container *ngIf="editView">

        <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon [color]="'primary'">add_circle
            </mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <ng-template matMenuContent>
                <button *ngFor="let e of list" mat-menu-item (click)="selected(e)">
                    <span>{{e.label|translate}}</span>
                </button>
            </ng-template>
        </mat-menu>
        <button mat-icon-button>
            <mat-icon [color]="'primary'" (click)="doUpdate()">check_circle_outline</mat-icon>
        </button>
        <button mat-icon-button>
            <mat-icon [color]="'error'" (click)="doCancel()" style="margin: auto;">cancel</mat-icon>
        </button>
    </ng-container>
    <mat-icon *ngIf="!readOnly&&!editView" [ngStyle]="{'visibility':displayEdit}" [color]="'primary'" (click)="doEdit()"
        style="padding-right: 8px;cursor: pointer;">edit
    </mat-icon>
</div>